<template>
    <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区 -->
      <el-card>
        <el-row>
          账号：{{userInfo.userName}}
        </el-row>
        <el-row  v-if="userInfo.userType === 0 || userInfo.userType === 1">
          <el-row>
            联系电话：{{userInfo.admin.adminPhone}}
          </el-row>
          <el-row>
            身份证号码：{{userInfo.admin.adminIdentityCardNumber}}
          </el-row>
        </el-row>
        <el-row v-else>
          <el-row>
            姓名： {{userInfo.student.stuName}}
          </el-row>
          <el-row>
            身份证号码：{{userInfo.student.stuIdentityCardNumber}}
          </el-row>
          <el-row>
            学院-专业-班级：{{userInfo.student.stuClass.major.college.collegeName}}-{{userInfo.student.stuClass.major.majorName}}-{{userInfo.student.stuClass.className}}
          </el-row>
          <el-row>
            辅导员：{{userInfo.student.stuClass.classTeacher}}
          </el-row>
          <el-row>
            宿舍：{{userInfo.student.dormitory.building.buildingNumber}}-{{userInfo.student.dormitory.dormitoryRoom}}-{{userInfo.student.stuBed}}
          </el-row>
        </el-row>
        <el-row> <el-link type="info" @click="editPasswordDialogVisible = true">修改密码</el-link></el-row>
        <!-- 修改密码对话框 -->
        <el-dialog
          title="修改密码"
          :visible.sync="editPasswordDialogVisible"
          width="50%"
          @close="editPasswordDialogClosed">
          <el-form :model="editPasswordForm" :rules="editPasswordFormRules" ref="editPasswordFormRef" label-width="100px">
            <el-form-item label="密码" prop="password">
              <el-input  type="password" v-model="editPasswordForm.password"/>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editPasswordDialogVisible = false" >取 消</el-button>
            <el-button type="primary" @click="editPassword">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          userInfo: {
            userType: '',
            userName: '',
            admin:{
              adminPhone: '',
              adminIdentityCardNumber: '',
            },
            student: {
              stuBed: '',
              stuName: '',
              stuIdentityCardNumber: '',
              dormitory: {
                building: {
                  buildingNumber: ''
                },
                dormitoryRoom: '',
              },
              stuClass: {
                className: '',
                classTeacher: '',
                major: {
                  majorName: '',
                  college: {
                    collegeName: ''
                  }
                }
              }
            },
          },
          editPasswordDialogVisible: false,
          editPasswordForm: {
            userName: '',
            password: ''
          },
          editPasswordFormRules: {
            password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              {min: 6, max: 12, message: '密码长度在6~12位字符之间', trigger: 'blur'}
            ]
          }

        }
      },

      created() {
        this.getPersonInfo();
      },

      methods: {
        /* 从cookie中获取个人信息 */
        getPersonInfo() {
          this.userInfo = this.$cookies.get('user');
          this.editPasswordForm.userName = this.userInfo.userName;
        },

        /* 修改密码 */
        editPassword() {
          this.$refs.editPasswordFormRef.validate(valid => {
            if (!valid) return;
            this.$axios.put(this.$http + '/otherManageController/editPassword/'+this.editPasswordForm.userName + '/' + this.$md5(this.editPasswordForm.password)).then(res => {
              this.editPasswordDialogVisible = false;
              if (res.data.code === 100)
                return this.$message.error("密码修改失败，请联系管理员")
              this.$message.success("密码修改成功")
            }).catch(err => {
              this.$message.error("后台异常"+err)
            })
          })
        },

        /* 监听添加对话框的关闭， 对其进行清空 */
        editPasswordDialogClosed() {
          this.$refs.editPasswordFormRef.resetFields();
        },
      }


    }
</script>

<style scoped>

</style>
